<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="project-info">
          <span>项目信息</span>
          <div class="form-box">
            <el-form
              ref="providerFormRef"
              style="max-width: 1200px"
              :model="providerForm.xinxi"
              :rules="rules"
              label-position="top"
            >
              <el-form-item label="公司名称：" prop="gongsimingcheng">
                <el-col :span="10">
                  <el-input
                    size="large"
                    v-model="providerForm.xinxi.gongsimingcheng"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="主营业务：" prop="zhuyingyewu1">
                <el-select
                  v-model="providerForm.xinxi.zhuyingyewu1"
                  size="large"
                  multiple
                  placeholder="一级业务"
                  :loading="loading1"
                  style="width: 240px"
                  @remove-tag="removeTag1"
                >
                  <el-option
                    v-for="item in type1"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
                <el-select
                  v-model="providerForm.xinxi.zhuyingyewu2"
                  size="large"
                  multiple
                  placeholder="二级业务"
                  :loading="loading2"
                  style="width: 240px; margin-left: 10px"
                  @visible-change="GetType2"
                  @remove-tag="removeTag2"
                >
                  <el-option
                    v-for="item in type2"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
                <el-select
                  v-model="providerForm.xinxi.zhuyingyewu3"
                  size="large"
                  multiple
                  placeholder="三级业务"
                  :loading="loading3"
                  style="width: 240px; margin-left: 10px"
                  @visible-change="GetType3"
                >
                  <el-option
                    v-for="item in type3"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="详细地址：">
                <el-col :span="10">
                  <el-input
                    size="large"
                    :maxlength="80"
                    v-model="providerForm.xinxi.xiangxidizhi"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="账号：" prop="zhanghao">
                <el-col :span="10">
                  <el-input
                    size="large"
                    v-model="providerForm.xinxi.zhanghao"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="密码：" prop="mima">
                <el-col :span="10">
                  <el-input size="large" v-model="providerForm.xinxi.mima" />
                </el-col>
              </el-form-item>
              <el-form-item
                label="公司介绍（视频/图片-建议尺寸:750*560px）"
                prop="gongsijieshao"
              >
                <bjz-oss
                  :previewList="providerForm.xinxi.gongsijieshao"
                  :accept="['.jpg', '.png', '.jpeg', '.mp4']"
                  :allowMultiple="true"
                  :size="100"
                  @success="successIntroImg"
                  @remove="removeUploadFile1"
                />
              </el-form-item>
              <el-form-item label="备注：">
                <el-col :span="10">
                  <el-input
                    size="large"
                    type="textarea"
                    :rows="5"
                    v-model="providerForm.xinxi.beizhu"
                  />
                </el-col>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="project-info">
          <span>认证信息</span>
          <div class="form-box">
            <el-form
              ref="providerFormRef"
              style="max-width: 1200px"
              :rules="rules"
              :model="providerForm.renzheng"
              label-position="top"
            >
              <el-form-item label="公司LOGO(建议尺寸:80*80px)">
                <bjz-oss
                  :previewList="providerForm.renzheng.gysLogo"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="onSuccess"
                  @remove="removeUploadFile2"
                />
              </el-form-item>
              <el-form-item label="营业执照：" prop="yyzhzh">
                <bjz-oss
                  :previewList="providerForm.renzheng.yyzhzh"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="licenseUpload"
                  @remove="removeUploadFile3"
                />
              </el-form-item>
              <el-form-item label="营业执照及组织代码附件：" prop="yyzhzhZzhdm">
                <bjz-oss
                  :previewList="providerForm.renzheng.yyzhzhZzhdm"
                  :allowMultiple="true"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="attachImgUpload"
                  @remove="removeUploadFile4"
                />
              </el-form-item>
              <el-form-item label="社会统一信用代码：" prop="shhtyxydm">
                <el-col :span="10">
                  <el-input
                    size="large"
                    :maxlength="18"
                    v-model="providerForm.renzheng.shhtyxydm"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="法定代表：" prop="fadingdaibiao">
                <el-col :span="10">
                  <el-input
                    size="large"
                    :maxlength="20"
                    v-model="providerForm.renzheng.fadingdaibiao"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="注册资本（万）：" prop="zhuceziben">
                <el-col :span="10">
                  <el-input-number
                    size="large"
                    v-model="providerForm.renzheng.zhuceziben"
                    :precision="2"
                    :max="100000000"
                    :controls="false"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="成立日期：" prop="chengliriqi">
                <el-col :span="10">
                  <el-date-picker
                    v-model="providerForm.renzheng.chengliriqi"
                    value-format="YYYY-MM-DD"
                    type="date"
                    size="large"
                    placeholder="选择成立日期"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="营业期限：" prop="yingyeqixian">
                <el-col :span="10">
                  <el-date-picker
                    v-model="providerForm.renzheng.yingyeqixian"
                    value-format="YYYY-MM-DD"
                    type="date"
                    size="large"
                    placeholder="选择营业期限截止日期"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="银行信用：" prop="yinhangxinyong">
                <el-col :span="10">
                  <el-input
                    size="large"
                    v-model="providerForm.renzheng.yinhangxinyong"
                    :maxlength="20"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="经营范围：" prop="jingyingfanwei">
                <el-col :span="10">
                  <el-input
                    size="large"
                    :rows="8"
                    type="textarea"
                    :maxlength="500"
                    v-model="providerForm.renzheng.jingyingfanwei"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="是否上市">
                <el-radio-group v-model="providerForm.renzheng.shangshi">
                  <el-radio :label="1">已上市</el-radio>
                  <el-radio :label="0">未上市</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                v-if="providerForm.renzheng.shangshi != 0"
                label="上市地址："
              >
                <el-col :span="10">
                  <el-input
                    size="large"
                    :maxlength="80"
                    v-model="providerForm.renzheng.shangshidizhi"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="股票代码：">
                <el-col :span="10">
                  <el-input
                    size="large"
                    :maxlength="6"
                    v-model="providerForm.renzheng.gupiaodaima"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="经营品牌：">
                <el-col :span="10">
                  <el-input
                    size="large"
                    :maxlength="80"
                    v-model="providerForm.renzheng.jingyingpinpai"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="办公城市：">
                <el-cascader
                  @change="selectCity"
                  style="width: 452px !important"
                  size="large"
                  :options="cities"
                  :props="cityProps"
                  :placeholder="cityPlaceholder"
                />
              </el-form-item>
              <el-form-item
                v-if="check === '1'"
                style="margin-top: 120px"
                label="审核状态"
              >
                <el-radio-group v-model="providerForm.renzheng.shenhe">
                  <el-radio :label="0">待审核</el-radio>
                  <el-radio :label="1">审核通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="margin-top: 50px">
                <el-button
                  style="margin-left: 100px"
                  type="primary"
                  @click="submitForm(providerFormRef)"
                  >提交信息</el-button
                >
                <el-button style="margin-left: 50px" @click="$router.go(-1)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import upimg from "@/assets/icon-upload.png";
import { AddProvider, EditProvider, GetEditProvider } from "@/api/provider";
import { GetDictionary, GetDictionaryTree, GetDistrict } from "@/api/system";
import { baseMsg } from "@/utils/utils";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const providerFormRef = ref(null);
    const validateImg = (rule, value, callback) => {
      if (
        state.providerForm.xinxi.gongsijieshao &&
        state.providerForm.xinxi.gongsijieshao.length
      ) {
        callback();
      } else {
        callback(new Error("请上传公司介绍（视频/图片）"));
      }
    };
    const validateImg2 = (rule, value, callback) => {
      if (
        state.providerForm.renzheng.yyzhzh &&
        state.providerForm.renzheng.yyzhzh.length
      ) {
        callback();
      } else {
        callback(new Error("请上传公司营业执照"));
      }
    };
    const validateImg3 = (rule, value, callback) => {
      if (
        state.providerForm.renzheng.yyzhzhZzhdm &&
        state.providerForm.renzheng.yyzhzhZzhdm.length
      ) {
        callback();
      } else {
        callback(new Error("请上传营业执照及组织代码附件"));
      }
    };
    const state = reactive({
      upimg,
      providerForm: {
        xinxi: {
          gongsimingcheng: "",
          xiangxidizhi: "",
          zhanghao: "",
          mima: "",
          zhuyingyewu1: [],
          zhuyingyewu2: [],
          zhuyingyewu3: [],
          beizhu: "",
          gongsijieshao: [],
        },
        renzheng: {
          gysLogo: [],
          yyzhzh: [],
          yyzhzhZzhdm: [],
          shhtyxydm: "",
          fadingdaibiao: "",
          zhuceziben: 0,
          chengliriqi: "",
          yingyeqixian: "",
          yinhangxinyong: "",
          jingyingfanwei: "",
          shangshi: 0,
          shangshidizhi: "",
          gupiaodaima: "",
          jingyingpinpai: "",
          bangongdizhi: [],
          shenhe: 0,
        },
      },
      rules: {
        gongsimingcheng: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        zhuyingyewu1: [
          { required: true, message: "请选择主营业务", trigger: "change" },
        ],
        zhanghao: [
          {
            pattern: /^1[0-9]{10}$/,
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        mima: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 18,
            message: "密码长度应该为6-18位",
            trigger: "blur",
          },
        ],
        gongsijieshao: [
          { required: true, trigger: "blur", validator: validateImg },
        ],
        yyzhzh: [{ required: true, trigger: "blur", validator: validateImg2 }],
        yyzhzhZzhdm: [
          { required: true, trigger: "blur", validator: validateImg3 },
        ],
        shhtyxydm: [
          {
            required: true,
            message: "请输入社会统一信用代码",
            trigger: "blur",
          },
        ],
        fadingdaibiao: [
          { required: true, message: "请输入法定代表", trigger: "blur" },
        ],
        zhuceziben: [
          { required: true, message: "请输入注册资本", trigger: "blur" },
        ],
        chengliriqi: [
          {
            required: true,
            type: "date",
            message: "请选择成立日期",
            trigger: "change",
          },
        ],
        yingyeqixian: [
          {
            required: true,
            type: "date",
            message: "请选择营业期限",
            trigger: "change",
          },
        ],
        yinhangxinyong: [
          { required: true, message: "请输入银行信用", trigger: "blur" },
        ],
        jingyingfanwei: [
          { required: true, message: "请输入经营范围", trigger: "blur" },
        ],
      },
      cities: [],
      loading1: true,
      loading2: true,
      loading3: true,
      type1: [],
      type2: [],
      type3: [],
      cityProps: {
        label: "label",
        value: "id",
      },
      dicModel: "gongyingshangpinzhuanjialeixing",
      // 办公城市回显
      cityPlaceholder: "请选择办公城市",
      check: localStorage.getItem("check"),
    });
    // 公司介绍图片上传
    const successIntroImg = (res) => {
      state.providerForm.xinxi.gongsijieshao.push(res);
    };
    // 公司logo上传
    const onSuccess = (res) => {
      state.providerForm.renzheng.gysLogo.push(res);
    };
    // 营业执照上传
    const licenseUpload = (res) => {
      state.providerForm.renzheng.yyzhzh.push(res);
    };
    // 营业执照及其附件上传
    const attachImgUpload = (res) => {
      state.providerForm.renzheng.yyzhzhZzhdm.push(res);
    };
    const getCityList = async () => {
      // 城市列表下拉查询
      const res = await GetDistrict({ parentCode: 0, regionLevel: "city" });
      if (res.code == 4201) {
        state.cities = res.data;
        if (
          route.query.type == "edit" &&
          state.providerForm.renzheng.bangongdizhi?.length > 0
        ) {
          let str = "";
          const arr = state.providerForm.renzheng.bangongdizhi;
          // 国家
          let arr1 = {};
          // 省份
          let arr2 = {};
          // 城市
          let arr3 = {};
          // 区
          let arr4 = {};
          arr1 = res.data.find((item) => {
            return item.id == arr[0];
          });
          arr2 = arr1.children.find((item) => {
            return item.id == arr[1];
          });
          arr3 = arr2.children.find((item) => {
            return item.id == arr[2];
          });
          arr4 = arr3.children.find((item) => {
            return item.id == arr[3];
          });
          str =
            arr1.label +
            ` /${arr2.label}` +
            ` /${arr3.label}` +
            ` /${arr4.label}`;
          state.cityPlaceholder = str;
        }
      }
    };
    // 一级分类查询
    const GetType1 = async () => {
      state.loading1 = true;
      const res = await GetDictionaryTree({ dicModel: state.dicModel });
      if (res.code == 4201) {
        state.type1 = res.data;
        state.loading1 = false;
      } else {
        state.loading1 = false;
      }
    };
    // 查询二级分类
    const GetType2 = (val) => {
      state.loading2 = true;
      state.type2 = [];
      if (state.providerForm.xinxi.zhuyingyewu1.length > 0) {
        state.providerForm.xinxi.zhuyingyewu1.forEach((item) => {
          let obj = {};
          GetDictionary({ dicId: item }).then((res) => {
            obj = res;
            if (obj.code == 4201 && obj.data.length > 0) {
              obj.data.forEach((item) => {
                state.type2.push(item);
              });
            }
          });
        });
        state.loading2 = false;
      } else {
        state.loading2 = false;
      }
    };
    // 查询三级分类
    const GetType3 = (val) => {
      state.loading3 = true;
      state.type3 = [];
      if (state.providerForm.xinxi.zhuyingyewu2.length > 0) {
        state.providerForm.xinxi.zhuyingyewu2.forEach((item) => {
          let obj = {};
          GetDictionary({ dicId: item }).then((res) => {
            obj = res;
            if (obj.code == 4201 && obj.data.length > 0) {
              obj.data.forEach((item) => {
                state.type3.push(item);
              });
            }
          });
        });
        state.loading3 = false;
      } else {
        state.loading3 = false;
      }
    };
    // 移除已选择的标签
    const removeTag1 = () => {
      state.providerForm.xinxi.zhuyingyewu2 = [];
      state.type2 = [];
      state.providerForm.xinxi.zhuyingyewu3 = [];
      state.type3 = [];
    };
    const removeTag2 = () => {
      state.providerForm.xinxi.zhuyingyewu3 = [];
      state.type3 = [];
    };
    // 选择城市
    const selectCity = (value) => {
      state.providerForm.renzheng.bangongdizhi = value;
    };
    // 上传文件删除
    const removeUploadFile1 = (index) => {
      state.providerForm.xinxi.gongsijieshao.splice(index, 1);
    };
    const removeUploadFile2 = (index) => {
      state.providerForm.renzheng.gysLogo.splice(index, 1);
    };
    const removeUploadFile3 = (index) => {
      state.providerForm.renzheng.yyzhzh.splice(index, 1);
    };
    const removeUploadFile4 = (index) => {
      state.providerForm.renzheng.yyzhzhZzhdm.splice(index, 1);
    };
    // 供应商编辑查看
    const getProvider = async () => {
      if (route.query.type == "edit") {
        const res = await GetEditProvider({ id: route.query.id });
        if (res.code == 4201) {
          state.providerForm = res.data;
          GetType2();
          GetType3();
        }
      }
    };
    // 提交表单
    const submitForm = async (formEl) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          if (route.query.type == "add") {
            AddProvider(state.providerForm).then((res) => {
              if (res.code == 4202) {
                baseMsg("新增供应商成功");
                router.go(-1);
              }
            });
          }
          if (route.query.type == "edit") {
            EditProvider(state.providerForm).then((res) => {
              if (res.code == 4202) {
                baseMsg("编辑供应商成功");
                router.go(-1);
              }
            });
          }
        }
      });
    };
    GetType1();
    getProvider();
    getCityList();
    return {
      ...toRefs(state),
      onSuccess,
      submitForm,
      successIntroImg,
      licenseUpload,
      attachImgUpload,
      providerFormRef,
      removeTag1,
      removeTag2,
      GetType2,
      GetType3,
      selectCity,
      removeUploadFile1,
      removeUploadFile2,
      removeUploadFile3,
      removeUploadFile4,
      getProvider,
      GetType1,
      getCityList,
    };
  },
});
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
  .form-box {
    margin: 80px 0 0 140px;
    flex: 1;
  }
}
</style>
